var vm = new Vue({
    el: "#houtai",
    data: {
        mapData: [],
        cursor: 1,
        myChart: ""
    },
    watch: {
        mapData: function (newVal) {
            if (newVal.length > 0) {
                this.showMap();
            }
        }
    },
    created() {
        this.getData();
    },

    methods: {
        exit_() {
            const uid = sessionStorage.getItem("user_id");
            if (uid) {
                sessionStorage.removeItem("user_id");   //删除session
            }
            window.location.href = "/";
            axios({
                url: "/user/exit",
                method: "get",
                params: {
                    "uid": uid
                }
            })
        },
        to_admin() {
            window.location.href = "/admin_index";
        },
        getData() {
            axios({
                url: "/user/maps",
                method: "get"
            }).then(
                (resp) => {
                    if (resp.data.statu) {
                        this.mapData = resp.data.datas;
                    }
                }
            )
        },
        showMap() {
            const div = this.$refs.map;
            if (this.myChart === "") {
                this.myChart = echarts.init(div);
            }
            var option = {
                tooltip: {
                    triggerOn: "click",
                    formatter: function (e, t, n) {
                        console.log(e);
                        console.log(t);
                        console.log(n);
                        return e.data.name + ":</br>" + e.data.value + "人"
                    }
                },
                visualMap: {
                    min: 0,
                    max: 100000,
                    left: 26,
                    bottom: 40,
                    showLabel: true,
                    text: ["高", "低"],
                    pieces: [{
                        gt: 50,
                        label: "> 50人",
                        color: "#7f1100"
                    }, {
                        gte: 30,
                        lte: 50,
                        label: "30 - 50人",
                        color: "#ff5428"
                    }, {
                        gte: 15,
                        lt: 30,
                        label: "15 - 30人",
                        color: "#ff8c71"
                    }, {
                        gte: 5,
                        lt: 15,
                        label: "5 - 15人",
                        color: "#ffd768"
                    }, {
                        gte: 1,
                        lt: 5,
                        label: "1 - 5人",
                        color: "#BEDAEE"
                    }],
                    show: true
                },
                geo: {
                    map: "china",
                    roam: true,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1.13,
                    top: 50,
                    label: {
                        show: true,
                        fontSize: "14",
                        color: "rgba(0,0,0,0.7)"
                    },
                    itemStyle: {
                        borderColor: "rgba(0, 0, 0, 0.2)"
                    },
                    emphasis: {
                        areaColor: "#f2d5ad",
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: "确诊病例",
                    type: "map",
                    geoIndex: 0,
                    data: this.mapData
                }]
            };
            option && this.myChart.setOption(option);
        }
    }
})


